<section id="scrollfix">
  <div class="page-header">
    <h1>Scrollfix</h1>
  </div>
  <div class="row">
    <div class="span6">
      <h3>What?</h3>

      <p>Add a 'ui-fixed' class to elements when the page scrolls past them</p>

      <div id="scrollExample" class="well" ui-scrollfix="+200">
        <p ui-scrollfix="-50">They see me scrollin...</p>
        Try scrolling past the red text or changing the offset
      </div>
    </div>
    <div class="span6">
      <h3>Why?</h3>

      <p>Make elements sticky, or simply appear different after scrolling past a certain point</p>

      <p class="alert alert-info"><i class="icon-info-sign"></i> Remember that this directive
        <strong>only</strong> adds a
        <code>ui-scrollfix</code> class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.
      </p>
    </div>
  </div>

  <h3>How?</h3>
  <pre class="prettyprint">&lt;p ui-scrollfix&gt;They see me scrollin...&lt;/p&gt;</pre>
  <p>You can optionally pass a number to
    <code>ui-scrollfix</code> which would override the detected y-offset of the element. Values can be either absolute
    <code>600</code> or offset from the calculated value <code>-50</code> or <code>+100</code>.</p>
</section>